import { defineComponent, PropType, VNode } from 'vue';
import { useNamespace } from '@ibiz-template/vue3-util';
import { FormMDCtrlController } from '../form-mdctrl.controller';
import './form-mdctrl-container.scss';

export const FormMDCtrlContainer = defineComponent({
  name: 'IBizFormMDCtrl',
  props: {
    controller: {
      type: Object as PropType<FormMDCtrlController>,
      required: true,
    },
    buttonVisible: {
      type: Boolean,
      default: true,
      required: false,
    },
  },
  emits: ['insertButtonClick'],
  setup(props, { emit }) {
    const ns = useNamespace('form-mdctrl');

    const handleRemove = (): void => {};
    const insertButtonClick = (): void => {
      emit('insertButtonClick');
    };
    return { ns, handleRemove, insertButtonClick };
  },
  render() {
    const renderFormContent = (): VNode[] | undefined => {
      return this.$slots.default && this.$slots.default();
    };
    const renderMainContent = (): VNode => {
      return (
        <div class={this.ns.b('main')}>
          {[
            <div class={this.ns.b('title')}>
              <span class={this.ns.b('caption')}>
                {this.controller.model.caption}
              </span>
              <el-button
                v-show={this.buttonVisible}
                class={this.ns.b('add-btn')}
                onClick={(): void => this.insertButtonClick()}
              >
                添加
              </el-button>
            </div>,
            renderFormContent(),
          ]}
        </div>
      );
    };
    return (
      <div class={[this.ns.b(), ...this.controller.containerClass]}>
        {renderMainContent()}
      </div>
    );
  },
});

export default FormMDCtrlContainer;
